<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://unpkg.com/@antv/l7'></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        html,
        body {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
        var { Scene, GaodeMap } = L7;
        const scene = new Scene({
            id: 'map',
            map: new GaodeMap({
                /* dark|light|normal */
                style: 'normal', // 样式URL
                center: [120.19382669582967, 30.258134],
                pitch: 50,
                zoom: 2,
                // token: '3851594382e218c49865a4d6a5170b52',
            }),
            logoVisible: false
        });
        var data = [
            {
                lng: 114.30,
                lat: 30.50,
                name: "武汉"
            },
            {
                lng: 118.30,
                lat: 30.50,
                name: "上海"
            }
        ]
        scene.on("loaded", () => {
            var point_layer = new L7.PointLayer();
            point_layer.source(data, {
                parser: {
                    type: "json",
                    x: 'lng',
                    y: 'lat'
                }
            })
                .size(20)
                .shape("simple")
                .color("#652e80")
                .active(true)
            scene.addLayer(point_layer)
            /* LayerPopup */
            const layer_popup = new L7.LayerPopup({
                // new L7.LayerPopup()参数是一个对象，可以有items和属性
                // items属性传一个数组
                // 数组的每一项都是一个popup图层，可以针对不同的图层创建多个不同的
                // 对应的popup图层。
                // 当前这里只针对那个武汉上海点图层，创建了一个对应的popup图层。
                items: [
                    // item数组每一项是一个对象
                    // 对象有layer何fields属性
                    // layer表示这个popup图层对应哪个图层。
                    // fields表示该popup弹窗中的字段。
                    // fields属性是一个数组，里面每一项可以是字符串或对象
                    // 字符串就直接找哪个属性，显示对应的属性何属性值。
                    // 对象，里面可以再设field,formatField,formatValue属性。
                    // 表示选择哪个字段，格式化key为什么，格式化value为什么。
                    {
                        layer: point_layer,
                        // 所有的字段以数组的形式表示。
                        // 如果不更改key，就直接写字符串。
                        // 更改key，就把每个字符串写成一个对象。
                        fields: [{
                            // 把data中的name字段拿过来。
                            // field属性写字段的key
                            field: 'name',
                            // formatField属性写key要修改成的新的值
                            formatField: () => "名称",
                            // formatValue属性写要把原来name字段的value修改成的新的值‘
                            // 这两个回调函数都接收一个形参，就是原本的key
                            // 和原本的value。
                            // 返回值是，我们想要修改成的key和想要修改成的value。
                            formatValue: val => val
                        },
                            "lng"
                            // 这里就是field字段写两个属性，
                            // 第二个属性就是这个数组第二项，即lng属性。
                            // 不修改key和value，
                            // 那默认显示的就是原本的data数据中的properties属性
                            // 中的最初的key值和value值。
                        ]
                    }
                ],
                // 触发的方式为 hover 鼠标悬停。
                trigger: "hover"
            })
            // 再将popup图层添加到场景中即可。
            scene.addPopup(layer_popup)
        })
    </script>
</body>

</html>